<template>
    <view>
        <view class="navbar">
            <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
                {{ item.text }}
            </view>
        </view>
        <view class="list" v-for="(item, index) in navList" :key="index" v-if="tabCurrentIndex === index">
            {{ item.state }}
        </view>
        <view class="my_works">
            <view class="work_list">
                <view class="list">
                    <view class="list_img">
                        <image src="/static/img/img04.png" class="img"></image>
                    </view>
                    <view class="list_content">
                        <view class="top">
                            <view class="titles">
                                <view class="title">时光慢慢流逝</view>
                            </view>
                            <view class="des">
                                <view>鲍勃·迪伦 | 99+字</view>
                                <view class="say">
                                    <image src="/static/img/zan.png" class="img"></image>
                                    <view>朗读</view>
                                </view>
                            </view>
                        </view>
                        <view class="bottom">
                            <view class="icon">
                                <image src="/static/img/ren.png" class="img"></image>
                                <view class="num">&nbsp;99+人读过</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "index",
        data() {
                return {
                    tabCurrentIndex: 0,
                    navList: [
                        {
                            state: 0,
                            text: '文学畅销',
                            orderList: []
                        },
                        {
                            state: 1,
                            text: '世界名著',
                            orderList: []
                        },
                        {
                            state: 2,
                            text: '童音儿歌',
                            orderList: []
                        },
                        {
                            state: 3,
                            text: '国学经典',
                            orderList: []
                        },
                        {
                            state: 4,
                            text: '课文教材',
                            orderList: []
                        },
                        {
                            state: 5,
                            text: '外语小课堂',
                            orderList: []
                        }
                    ]
                };
            },
        onLoad(options) {
            // 页面显示是默认选中第一个
            this.tabCurrentIndex = 0;
        },
        methods: {
            changeTab(e) {
                this.tabCurrentIndex = e.target.current;
            },
            //顶部tab点击
            tabClick(index) {
                this.tabCurrentIndex = index;
            }}
    }
</script>

<style lang='scss'>
    .swiper-box {
        height: calc(100% - 40px);
    }
    .list-scroll-content {
        height: 100%;
    }

    .navbar {
        display: flex;
        white-space: nowrap;
        overflow-x: scroll;
        height: 75upx;
        padding: 0 30upx;
        background: #fff;
        position: relative;
        z-index: 10;
        .nav-item {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding:0 30upx;
            font-size: $uni-font-size-base;
            color: $uni-color-664e37;
            position: relative;
            &.current {
                color: $uni-color-fcb300;
                &:after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translateX(-50%);
                    width: 32upx;
                    height: 0;
                    border-bottom: 6upx solid $uni-color-fcb300;
                    border-radius: 4upx;
                }
            }
        }
    }

    .uni-swiper-item {
        height: auto;
    }
    .my_works{
            width: 630upx;
            height: auto;
             margin: 0 auto;
            .my_works_heade{
                display: flex;
                align-items: center;
                padding: 40upx 0;
                .img{
                    width: 37upx;
                    height: 37upx;
                    margin-right:14upx;
                }
                .my_works_title{
                    font-size: $uni-font-size-base;
                    color: $uni-color-664e37;
                }
            }
            .work_list{
                .list{
                    display: flex;
                    padding-top: 30upx;
                    .list_img{
                        width: $uni-img-size-160;
                        height:  $uni-img-size-160;
                        position: relative;
                        .img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .list_content{
                        flex: 1;
                        margin-left: 30upx;
                        padding-top: 11upx;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        border-bottom: 2upx solid #f2f2f2;
                        .top{

                            .titles{
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                .title{
                                    width: 100%;
                                    /*overflow: hidden;*/
                                    /*text-overflow:ellipsis;*/
                                    /*white-space: nowrap;*/
                                    font-size: $uni-font-size-16;
                                    color: $uni-color-664e37;
                                }
                            }
                            .des{
                                display: flex;
                                justify-content: space-between;
                                font-size: $uni-font-size-12;
                                color: $uni-color-876a48;
                                .say{
                                    width: 145upx;
                                    height: 60upx;
                                    border-radius: 30upx;
                                    background-color: $uni-color-fcb300;
                                    color: #fff;
                                    font-size: $uni-font-size-13;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    .img{
                                        width: 35upx;
                                        height: 33upx;
                                    }
                                }
                            }
                        }
                        .bottom{
                            display: flex;
                            box-sizing: border-box;
                            padding-bottom: 35upx;
                            .icon{
                                display: flex;
                                align-items: center;
                                padding-right: 32upx;
                                .img{
                                    width: 28upx;
                                    height: 26upx;
                                }
                                .num{
                                    font-size: 26upx;
                                    padding-left: 4upx;
                                    color: $uni-color-876a48;
                                }
                            }

                        }

                    }
                }
            }
        }


</style>
